<template>
  <div
    class="reporting-progress"
    :class="{ 'reporting-progress_disabled': data.state == 0 }"
  >
    <template>
      <div class="progress">
        <!-- 审核 -->
        <div
          class="step"
          :class="{ active: data.step == '1', over: data.step != '1' }"
        >
          <h3 class="title">
            <span class="step-icon"></span>
            <span class="step-line"></span>
            <span class="step-text">审核</span>
          </h3>
        </div>
        <!-- 派位 -->
        <div
          class="step step-paiwei"
          :class="{ active: data.step == '2', over: data.step == '3' }"
        >
          <h3 class="title">
            <span class="step-icon"></span>
            <span class="step-line"></span>
            <span class="step-text">派位</span>
          </h3>
        </div>
        <!-- 现场审核 -->
        <div class="step" :class="{ active: data.step == '3' }">
          <h3 class="title">
            <span class="step-icon"></span>
            <span class="step-text">现场审核</span>
          </h3>
        </div>
      </div>
      <div class="progress-info" :class="{ 'progress-info-pdr': !data }">
        <!-- 第一步待审核 -->
        <p
          class="info info-wait"
          v-if="data.step == 1 && data.auditStatus == '0'"
        >
          {{ data.auditStatusName }}
        </p>
        <!-- 第一步审核通过 -->
        <p
          class="info info-wait"
          v-if="data.step == 1 && data.auditStatus == 'Y'"
        >
          {{ data.auditStatusName }}
        </p>
        <!-- 第一步审核不通过 -->
        <div v-if="data.step == 1 && data.auditStatus == 'N'">
          <p class="info info-fali">
            <i><van-icon name="cross" /></i>{{ data.auditStatusName }} <br />
            <span>{{ data.auditReason }}</span>
          </p>
          <van-button
            v-if="verify.res != -1"
            type="info"
            plain
            class="van-button_fixed"
            @click="onSubmit"
            >确认修改</van-button
          >
        </div>
        <!-- 第二步预录取 -->
        <p class="info info-school" v-if="data.step == 2">
          拟就读学校<br />{{ data.schoolName }}
        </p>
        <!-- 第三步待审核 -->
        <p
          class="info info-school"
          v-if="data.step == 3 && data.schoolStatus == '0'"
        >
          拟就读学校 <br />
          {{ data.schoolName }}，待现场审核
        </p>
        <!-- 第三步现场审核通过 -->
        <p
          class="info info-school"
          v-if="data.step == 3 && data.schoolStatus == 'Y'"
        >
          录取学校：
          {{ data.schoolName }}
          <span>开学时间另行通知，请耐心等待</span>
        </p>
        <!-- 第三步现场审核不通过 -->
        <p class="info-fali" v-if="data.step == 3 && data.schoolStatus == 'N'">
          <i><van-icon name="cross" /></i>{{ data.schoolStatusName }} <br />
          <span>{{ data.schoolReason }}</span>
        </p>
      </div>
    </template>
  </div>
</template>

<script>
import { getVerify } from "../utils/api";
export default {
  name: "Progress",
  props: {
    data: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {};
  },
  methods: {
    onSubmit() {
      this.$emit("_click");
      //   this.$router.push("/basicinfo");
    },
    // 判断学生是否可修改信息、注销
    async getVerify() {
      try {
        const data = await getVerify();
        localDb.set("verify", data);
      } catch (error) {}
    },
  },
  created() {
    this.getVerify();
  },
  computed: {
    verify() {
      return this.$store.state.verify;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.reporting-progress {
  //   padding: 30px 30px 72px;
  background: #0184ff url(~@/assets/images/bg-jgy.png) no-repeat;
  background-size: 100%;
  text-align: center;
  min-height: 330px;
}
.reporting-progress_disabled {
  //   height: 366px;
  background: #fff5e4;
  box-sizing: border-box;
  text-align: center;
}
.progress {
  //   margin-left: 30px;
  padding-top: 20px;
  .step {
    display: inline-block;
    // font-size: 16px;
    color: #1fdaff;
    text-align: left;
    .title {
      position: relative;
      //   padding: 0 20px 0 22px;
      line-height: 60px;
      font-size: 32px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .step-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 4px solid #1acdff;
      }
      .step-line {
        width: 180px;
        border-top: 1px dashed #69b6ff;
        position: absolute;
        left: 60px;
        top: 16px;
      }
      .step-status {
        float: right;
        font-size: 28px;
        color: #fff;
      }
      .step-text {
        color: #1fdaff;
      }
    }
  }
  .step.step-paiwei {
    margin: 0 146px 0 180px;
  }
  .step.active {
    .title {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99FFFFFF', endColorstr='#99FFFFFF');
      color: #fff;
      &::before {
        display: none;
      }
      .step-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: #fff;
        border-radius: 50%;
        border: 8px solid #51b2ff;
      }
      .step-line {
        width: 180px;
        border-top: 1px solid #69b6ff;
        position: absolute;
        left: 66px;
        top: 16px;
      }
      .step-text {
        color: #fff;
      }
    }
    .step-status {
      color: #ff3737;
    }
  }
  .step.over {
    .step-line {
      width: 180px;
      border-top: 1px solid #69b6ff;
      position: absolute;
      left: 66px;
      top: 18px;
    }
    .step-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 50%;
      border: 8px solid #51b2ff;
    }
    .step-text {
      color: #fff;
    }
  }
}
.progress-info {
  color: #fff;
  font-size: 32px;
  .progress-info-pdr {
    height: 330px;
  }
  .info {
    font-family: PingFangSC-Semibold;
  }
  .info-wait {
    padding: 88px 0 90px;
  }
  .info-school {
    line-height: 50px;
    padding: 61px 0 62px;
    span {
      display: inline-block;
      font-size: 24px;
      font-family: PingFangSC-Regular;
    }
  }
  .info-fali {
    padding: 30px;
    i {
      display: inline-block;
      margin-right: 8px;
      margin-bottom: 5px;
      .van-icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        line-height: 46px;
        font-weight: bold;
        border: 7px solid #4da9ff;
        color: #ff5b5b;
        background-color: #fff;
      }
    }
    span {
      font-size: 24px;
      font-family: PingFangSC-Regular;
    }
    .van-button {
      width: 152px;
      height: 50px;
    }
  }
  .van-button {
    // width: 152px;
    height: 50px;
    padding: 0 20px;
    border-radius: 6px;
    margin-bottom: 31px;
    font-size: 28px;
  }
}
</style>
<style lang="scss"></style>
